<ui:composition template="index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<f:metadata>
		<f:viewParam name="oauth_token" value="#{userSessionBean.oauthToken}" />
	</f:metadata>
	
	<ui:param name="pageTitle" value="Documentos | ReviewIt" />
	<ui:param name="pageName" value="page-documents" />

	<ui:define name="css"></ui:define>

	<ui:define name="feature"></ui:define>

	<ui:define name="content">
		<h3 class="title">
			<div class="icon-folder-open"></div>
			Documentos
		</h3>
		<h:form id="form-search-documents" onkeypress="if (event.keyCode == 13) { document.getElementById('form-search-documents:form-search-btn').click(); return false; }">
			<h:outputText id="form-search-document-msg"
				value="#{sessionScope['msgDocumentoNaoEncontrado']}" />
			<div class="row collapse">
				<div class="small-9 large-10 columns">
					<p:inputText id="search-doc" value="#{documentBean.document.title}" />
					<p:watermark for="search-doc" value="Procurar..." />
				</div>
				<div class="small-3 large-2 columns">
					<h:commandLink id="form-search-btn" action="#{documentBean.procurar()}"
						update="form-search-documents, form-search-document-msg, list-documents">
						<span class="prefix"> <i class="icon-search"></i>
						</span>
					</h:commandLink>
				</div>
			</div>
		</h:form>
		<hr />
		<div id="list-documents" class="docs">
			<p:dataGrid var="doc" value="#{documentBean.documents}"
				columns="1" rows="10" paginator="true"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="10, 25, 50">
				<div class="doc">
					<div class="panel callout">
						<div class="doc-score icon-star">
							<span>#{doc.score}</span>
						</div>
						<div class="doc-feedbacks icon-comment">
							<span>0</span>
						</div>
					</div>
					<div class="doc-details">
						<a class="doc-title" href="document.xhtml?doc_id=#{doc.id}">#{doc.title}</a>
						<div class="doc-info text-right">
							<div class="doc-user icon-user"></div>
							<a href="user.xhtml?user_id=#{doc.owner.id}">
								#{doc.owner.firstName} #{doc.owner.lastName} </a> |
							<div class="doc-date icon-calendar"></div>
							<h:outputText value="#{doc.creationDate}">
								<f:convertDateTime pattern="dd/MM/yy HH:mm" />
							</h:outputText>
						</div>
						<div class="doc-tags">
							<ui:repeat var="tag" value="#{doc.tags}">
								<a href="documents.xhtml?tag=#{tag}" class="tiny button">#{tag}</a>
							</ui:repeat>
						</div>
					</div>
				</div>
				<hr />
			</p:dataGrid>
		</div>
	</ui:define>

	<ui:define name="sidebar">
		<div id="sidebar-docs-statistics" class="panel callout">
			<span class="icon-bar-chart"></span> <strong>Estatísticas</strong>
			<hr />
			<div>
				<h3>#{documentBean.totalDocuments}</h3>
				<strong>Documentos</strong>
				<h3>#{documentBean.totalVotes}</h3>
				<strong>Votos</strong>
				<h3>#{documentBean.totalTags}</h3>
				<strong>Tags</strong>
			</div>
		</div>
		<div id="sidebar-tags" class="panel">
			<span class="icon-tag"></span> <strong>Top Tags</strong>
			<hr />
			<ui:repeat var="tag" value="#{tagBean.topTags}">
				<a href="documents.xhtml?tag=#{tag}" class="tiny button">#{tag}</a>
			</ui:repeat>
		</div>
		<div id="sidebar-tags" class="panel">
			<span class="icon-tag"></span> <strong>Tags Novas</strong>
			<hr />
			<ui:repeat var="tag" value="#{tagBean.newTags}">
				<a href="documents.xhtml?tag=#{tag}" class="tiny button">#{tag}</a>
			</ui:repeat>
		</div>
	</ui:define>
</ui:composition>